<template>
	<view class="page_1">
		<!-- 頂部盒子 -->
		<view class="top_box">
			<view class="left_bj"></view>
			<view class="right_bj"></view>
			<!-- 導航欄 -->
			<uni-nav-bar statusBar fixed :border="false" backgroundColor="rgba(0,0,0,0.0)">
				<view class="nav_title" slot="left">我的</view>
			</uni-nav-bar>
			<!-- 头像信息什么的 -->
			<view class="headImg_info">
				<!-- 登入样式 -->
				<view class="info">
					<image class="head_img" :src="myinfo.wxPhotoURL||'../../static/default-avatar.png'"
						@click="navPersonalInfo"></image>
					<view class="name_phone">
						<view class="name" v-if="myinfo.name">
							{{myinfo.name||'未登录'}}
						</view>
						<view class="phone" v-if="myinfo.mainPhone">
							{{myinfo.mainPhone}}
						</view>
					</view>
				</view>
				<!-- 未登入样式 -->
				<!-- 		<view class="info">
						<image class="head_img" src="../../static/logo.png"></image>
						<view class="login">
							请登入
						</view>
				</view> -->
				<image class="message_img" src="@/static/message.png" @click="navMessageCenter"></image>
			</view>
			<!-- 账户信息 -->
			<view class="account">
				<view class="item" @click="navMyBalance">
					<view class="pricebox">{{myinfo.balance||0}}</view>
					<view>优生活余额</view>
				</view>
				<view class="item" @click="tocoupon()">
					<view class="pricebox">{{myinfo.couponCount||0}}</view>
					<view>我的卡劵</view>
				</view>
				<view class="item" @click="tointegral()">
					<view class="pricebox">{{myinfo.wx_balance||0}}</view>
					<view>账户余额</view>
				</view>
			</view>
			<!-- vip -->
			<view class="vip_box">
				<view class="left">
					<text>我的身份：</text>
					<image src="@/static/byhy.png"></image>
				</view>
				<image src="@/static/v1.png" class="v_image"></image>
				<view class="right">
					<text>查看权益</text>
					<image src="@/static/right.png"></image>
				</view>
			</view>
		</view>

		<!-- 订单 -->
		<view class="order_box">
			<view class="top_nav">
				<view class="top_nav_left">
					<view class="itemnav" v-for="(item,index) in list" :key="index" @click="navActive(item.id)">
						<view :style="{'color':item.id==active?'#F94D29':'#222222'}">{{item.title}}</view>
					</view>
					<!-- <image class="left_img" src="@/static/nav1.png" v-if="active==1"></image>
					<image class="left_img" src="@/static/nav2.png"  v-if="active==2"></image>
					<image class="left_img" src="@/static/nav3.png"  v-if="active==3"></image>
					<image class="left_img" src="@/static/nav4.png"  v-if="active==4"></image>
					<view class="left_item" :class="active==1?'active':''" @click="navActive(1)">
						商城订单
					</view>
					<view class="left_item" :class="active==2?'active':''" @click="navActive(2)">
						到店订单
					</view>
					<view class="left_item" :class="active==3?'active':''" @click="navActive(3)">
						外卖订单
					</view>
					<view class="left_item" :class="active==4?'active':''" @click="navActive(4)">
						自提订单
					</view> -->
				</view>
				<!-- <view class="top_nav_right" @click="orderGoods">
					<text>查看更多</text>
					<image class="right_img" src="@/static/right@2.png"></image>
				</view> -->
			</view>
			<view class="order_nav">
				<view class="order_nav_item" v-for="(item,index) in navBox" :key="index" @click="orderGoods(item,index)"
					v-if="active!==2?index<=3?true:false:index<=2?true:false">
					<view class="red" v-if="token&&index==0&&statusone>0">{{statusone}}</view>
					<view class="red" v-if="token&&index==1&&statustwo>0">{{statustwo}}</view>
					<view class="red" v-if="token&&index==3&&statusfour>0">{{statusfour}}</view>
					<view class="red" v-if="token&&index==2&&active==2&&statusfour>0">{{statusfour}}</view>
					<view class="red" v-if="token&&index==2&&active!==2&&statustre>0">{{statustre}}</view>
					<!-- <view class="red" v-if="token">{{index==0?statusone:index==1?statustwo:index==3?statusfour:index==2&&active==2?statusfour:statustre}}</view>
					<view class="red" v-if="token">{{index==0?statusone:index==1?statustwo:index==3?statusfour:index==2&&active==2?statusfour:statustre}}</view> -->
					<image :src="item.image"></image>
					<text v-if="active==1">{{item.text}}</text>
					<text v-if="active==2">{{item.arrivetext}}</text>
					<text v-if="active==4||active==5">{{item.acttext}}</text>
					<text v-if="active==3">{{item.taketext}}</text>
				</view>
			</view>
		</view>
		<!-- 我的权益 -->
		<view class="equity">
			<view class="equity_title">我的权益</view>
			<view class="equity_content">
				<view class="collect" @click="tocollect()">
					<view class="collect_item">
						<view class="top"><text>商品收藏</text><text>{{myinfo.collectGoodsCount||0}}</text></view>
						<view class="down">喜欢的商品都可以收藏</view>
					</view>
					<view class="collect_right"></view>
				</view>
				<view class="shop">
					<view class="shop_left" @click="tointerest()">
						<text>{{myinfo.collectMerchCount||0}}</text>
						<text>店铺关注</text>
					</view>
					<view class="shop_right" @click="tocomment()">
						<view class="shop_right_flex">
							<text>{{myinfo.commentCount||0}}</text>
							<text>我的评论</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 我的服务 -->
		<view class="service">
			<view class="service_title">我的服务</view>
			<view class="service_content">
				<view class="item" v-for="(item,index) in serveList" :key="index" @click="serveClick(item,index)">
					<image :src="item.image"></image>
					<text>{{item.text}}</text>
				</view>
			</view>
		</view>
		<!-- 遮罩层 -->
		<uni-popup ref="popup" type="center" :animation="false">
			<!-- <view class="phone">
				<view class="title">客服电话：{{ mobile }}</view>
				<view class="btns">
					<view class="btn_left" @click="close()">取消</view>
					<view class="btn_right" @click="callServer">拨打</view>
				</view>
			</view> -->
			<view class="modelbox">
				<view class="namebox">拨打电话</view>
				<view class="inputbox">
					{{mobile}}
				</view>
				<view class="butbox">
					<view style=" color: #222222;border-top:solid  2rpx #EEEEEE;" @click="close()">取消</view>
					<view style="background: linear-gradient(90deg, #F94D29 0%, #F99529 100%);" @click="callServer">拨打
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: 1,
				showPhone: false,
				navBox: [{
					image: "../../static/myNav@1.png",
					text: "待付款",
					acttext: "待付款",
					taketext: '待付款',
					arrivetext: '待付款',
					path: 0,
				}, {
					image: "../../static/myNav@2.png",
					text: "待发货",
					acttext: "待核销",
					taketext: '配送中',
					arrivetext: '已完成',
					path: 1,
				}, {
					image: "../../static/myNav@3.png",
					text: "待收货",
					acttext: "已核销",
					taketext: '已送达',
					arrivetext: '退款/售后',
					path: 2,
				}, {
					image: "../../static/myNav@4.png",
					text: "退款/售后",
					acttext: "退款/售后",
					taketext: '售后',
					path: 5,
				}],
				serveList: [{
						image: "../../static/serve@1.png",
						text: "我的地址"
					},
					{
						image: "../../static/serve@2.png",
						text: "我的车辆",
						url: '/pages/mycar/mycar'
					},
					{
						image: "../../static/serve@3.png",
						text: "我的客服"
					}, {
						image: "../../static/serve@4.png",
						text: "帮助中心"
					}, {
						image: "../../static/server@5.png",
						text: "管理端"
					}, {
						image: "../../static/server6.png",
						text: "我的活动",
						url: '/pages/myactivity/myactivity'
					}
				],
				mobile: '',
				token: uni.getStorageSync('token') || '',
				myinfo: {},
				delivery_method: '',
				statusone: '',
				statustwo: '',
				statustre: '',
				statusfour: '',
				list: [{
					id: 1,
					title: '商城订单'
				}, {
					id: 2,
					title: '到店订单'
				}, {
					id: 3,
					title: '外卖订单'
				}, {
					id: 4,
					title: '自提订单'
				}, {
					id: 5,
					title: '团购订单'
				}]
			}
		},
		onLoad() {
			this.getServeMobile()
		},
		onShow() {
			this.token = uni.getStorageSync('token') || ''
			if (this.token) {
				this.getmyinfo()
				this.getnum()
			}
		},
		methods: {
			tourl(item, index) {
				console.log(this.active, 'this.active')
				uni.navigateTo({
					url: item.path
				})
			},
			getmyinfo() {
				this.$http({
					url: 'api/Wechat/userinfo'
				}).then(res => {
					this.myinfo = res.data
				})
			},
			getnum() {
				this.$http({
					url: 'api/wechat/orderCountStatistics',
					data: {
						order_type: this.active //1 供应商订单 2到店支付订单 3外卖订单 4自提订单
					}
				}).then(res => {
					this.statusone = res.data.status1
					this.statustwo = res.data.status2
					this.statustre = res.data.status3
					this.statusfour = res.data.status4
				})
			},
			//去优惠券
			tocoupon() {
				uni.navigateTo({
					url: '/personalData/cardroll/cardroll'
				})
			},
			navActive(type) {
				this.active = type
				this.getnum()
			},
			// 登入成功状态下点击头像跳转
			navPersonalInfo() {
				if (!this.myinfo.wxPhotoURL) {
					uni.navigateTo({
						url: "/pages/login/login",
					})
				} else {
					uni.navigateTo({
						url: "/personalData/personalInfo/personalInfo",
					})
				}
			},
			// 跳转消息中心
			navMessageCenter() {
				uni.navigateTo({
					url: "/personalData/messageCenter/messageCenter"
				})
			},
			// 跳转我的余额
			navMyBalance() {
				// uni.navigateTo({
				// 	url: "/personalData/myBalance/myBalance"
				// })
			},
			//获取号码
			getServeMobile() {
				this.$http({
					url: 'api/wechat/serverMobile'
				}).then(res => {
					this.mobile = res.data
				})
			},
			//拨打电话
			callServer() {
				uni.makePhoneCall({
					phoneNumber: this.mobile
				})
			},
			// 我的服务点击事件//is_agent  是否商家管理员 0否 1是
			serveClick(item, index) {
				if (index == 0) {
					uni.navigateTo({
						url: '/personalData/addresslist/addresslist'
					})
				}
				if (index == 1) {
					uni.navigateTo({
						url: '/pages/mycar/mycar'
					})
				}
				if (index == 2) {
					console.log(123)
					this.$refs.popup.open('center')
				}
				if (index == 3) {
					uni.navigateTo({
						url: '/personalData/help/help'
					})
				}
				if (index == 4 && this.myinfo.is_agent == 1 && this.myinfo.store_id > 0 && this.token) {
					uni.navigateTo({
						url: '/admin/index/index'
					})
				}
				if (index == 4 && this.myinfo.is_agent == 0) {
					uni.showToast({
						title: '您并不是管理员',
						icon: 'none'
					})
				}
				if (index == 5) {
					uni.navigateTo({
						url: item.url
					})
				}
			},

			close() {
				this.$refs.popup.close()
			},
			// 订单跳转
			orderGoods(item) {
				//order_type 1 商品购买订单  2到店支付订单  3外卖订单//delivery_method //配送方式 1快递 2自提
				if (this.active == 4) {
					this.delivery_method = 2
				} else if (this.active == 2) {
					this.delivery_method = 1
				} else if (this.active == 3) {
					this.delivery_method = ''
				} else if (this.active == 5) {
					this.delivery_method = 2
				} else {
					this.delivery_method = 1
				}
				uni.navigateTo({ //currindex 0==物流订单，1==自提订单
					url: "/pageshop/goodsorder/goodsorder?type=" + (item.path) + '&order_type=' + (this.active) +
						'&delivery_method=' + this.delivery_method
				})
			},
			//收藏跳转
			tocollect() {
				uni.navigateTo({
					url: '/personalData/collect/collect'
				})
			},
			//评论跳转
			tocomment() {
				uni.navigateTo({
					url: '/personalData/mycomment/mycomment'
				})
			},
			//店铺关注
			tointerest() {
				uni.navigateTo({
					url: '/personalData/intereststore/intereststore'
				})
			},
			//积分
			tointegral() {
				// uni.navigateTo({
				// 	url: '/personalData/wxrecord/wxrecord'
				// })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page_1 {
		padding-bottom: 40rpx;
	}

	.top_box {
		width: 750rpx;
		height: 626rpx;
		background: linear-gradient(180deg, #FFEFEC 0%, #FEF0EE 57%, #F7F7F7 100%);
		position: relative;

		// 定位背景色
		.left_bj {
			width: 242rpx;
			height: 230rpx;
			background: #F94D29;
			opacity: 0.27;
			filter: blur(31px);
			position: absolute;
			top: 0;
			left: 0;
			border-radius: 0px 27rpx 100rpx 0px;
			pointer-events: none
		}

		.right_bj {
			width: 330rpx;
			height: 248rpx;
			background: #F99529;
			opacity: 0.14;
			filter: blur(16px);
			position: absolute;
			top: 0;
			right: 0;
			border-radius: 0px 27rpx 0px 125rpx;
			pointer-events: none
		}

		// 导航栏
		.nav_title {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 36rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			// font-weight: bold;
			font-weight: 500;
			color: #222222;
		}

		// 头像信息
		.headImg_info {
			margin-top: 56rpx;
			display: flex;
			justify-content: space-between;
			padding: 0 30rpx 0 32rpx;
			box-sizing: border-box;

			.info {
				display: flex;
				align-items: center;
				gap: 0 24rpx;

				.head_img {
					display: block;
					width: 116rpx;
					height: 116rpx;
					// background: #000000;
					border-radius: 110rpx 110rpx 110rpx 110rpx;
					border: 2rpx solid #F3F2F2;
				}

				.login {
					font-size: 34rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #222222;
				}

				.name_phone {
					display: flex;
					flex-direction: column;
					gap: 18rpx 0;

					.name {
						width: 470rpx;
						font-size: 36rpx;
						font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
						font-weight: bold;
						color: #222222;
						line-height: 55rpx;
						height: 55rpx;
						// line-height: 1em;
						-webkit-line-clamp: 1;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.phone {
						padding: 10rpx 16rpx 10rpx 18rpx;
						width: fit-content;
						font-size: 24rpx;
						font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
						font-weight: normal;
						color: #FFFFFF;
						background: rgba(0, 0, 0, 0.5);
						border-radius: 42rpx 42rpx 42rpx 42rpx;
						box-sizing: border-box;
					}
				}
			}

			.message_img {
				width: 26rpx;
				height: 28rpx;
			}
		}

		// 账户信息
		.account {
			padding: 0 40rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			margin-top: 50rpx;

			.item {
				gap: 26rpx 0;
				width: 33.3%;
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 28rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #222222;
				line-height: 1em;

				.pricebox {
					width: 100%;
					text-align: center;
					-webkit-line-clamp: 1;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
					color: #F94D29;
					font-size: 30rpx;
				}

				:first-child {
					font-size: 44rpx;
					line-height: 1em;
				}
			}
		}

		// vip
		.vip_box {
			height: 78rpx;
			width: calc(100% - 62rpx);
			margin: 0 30rpx 0 32rpx;
			padding: 0 26rpx 0 24rpx;
			box-sizing: border-box;
			background-image: url("https://zdcloud.zxkjnc.com/images/6406.png");
			background-size: 100% 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: absolute;
			bottom: 10rpx;

			.left {
				display: flex;
				align-items: center;


				text {
					font-size: 20rpx;
					font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
					font-weight: normal;
					color: #FFFFFF;
					line-height: 1em;
				}

				image {
					width: 148rpx;
					height: 52rpx;
				}
			}

			.right {
				display: flex;
				align-items: center;
				gap: 0 12rpx;

				text {
					font-size: 24rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #BFBFBF;
					line-height: 1em;
				}

				image {
					width: 8rpx;
					height: 16rpx;
				}
			}

			.v_image {
				width: 57.82rpx;
				height: 65.04rpx;
				margin-left: 60rpx;
			}
		}
	}

	// 订单
	.order_box {
		width: 690rpx;
		height: 254rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 12rpx 30rpx 0 30rpx;
		position: relative;
		display: flex;
		flex-direction: column;

		.top_nav {
			width: 100%;
			height: 68rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;



			.top_nav_left {
				display: flex;
				width: 690rpx;
				height: 68rpx;

				.itemnav {
					width: 20%;
					text-align: center;
					background-color: #FFF2EF;
					line-height: 68rpx;
					font-size: 28rpx;
					font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
					font-weight: normal;
					color: #222222;
				}

				.active {
					color: #FFFFFF !important;
				}

				.left_img {
					width: 690rpx;
					height: 68rpx;
					position: absolute;
					top: 0;
					left: 0;
				}

				.left_item {
					width: 50%;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 30rpx;
					font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
					font-weight: normal;
					color: #F94D29;
					z-index: 10;
				}
			}

			.top_nav_right {
				margin-right: 20rpx;
				display: flex;
				align-items: center;
				gap: 0 16rpx;

				text {
					font-size: 24rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #BFBFBF;
					line-height: 1em;
				}

				.right_img {
					width: 8rpx;
					height: 16rpx;
				}
			}
		}

		.order_nav {
			display: flex;
			justify-content: space-around;
			align-items: center;
			width: 100%;
			height: 100%;

			.order_nav_item {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 26rpx 0;
				position: relative;

				.red {
					width: 35rpx;
					height: 35rpx;
					text-align: center;
					color: #FFF;
					line-height: 35rpx;
					position: absolute;
					background-color: red;
					border-radius: 100%;
					font-size: 18rpx;
					top: -10rpx;
					right: 0rpx;
				}

				image {
					width: 60rpx;
					height: 54rpx;
				}

				text {
					font-size: 28rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #222222;
				}
			}
		}
	}

	// 我的权益
	.equity {
		width: 690rpx;
		height: 474rpx;
		background: #FFFFFF;
		margin: 26rpx auto 0 auto;
		padding: 40rpx 20rpx 30rpx 20rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		border-radius: 20rpx;

		.equity_title {
			font-size: 30rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #222222;
			line-height: 1em;
			flex-shrink: 0;
		}

		.equity_content {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin-top: 34rpx;

			.collect {
				width: 100%;
				height: 160rpx;
				background: #FFF2EF;
				border-radius: 16rpx;
				display: flex;

				.collect_item {
					width: 50%;
					height: 100%;
					padding: 32rpx 20rpx;
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.top {
						text:first-child {
							font-size: 30rpx;
							font-family: Source Han Sans CN-Medium, Source Han Sans CN;
							font-weight: 500;
							color: #F94D29;
							line-height: 1em;
							margin-right: 26rpx;
						}

						text:last-child {
							font-size: 44rpx;
							font-family: Source Han Sans CN-Medium, Source Han Sans CN;
							font-weight: 500;
							color: #F94D29;
							line-height: 1em;
						}
					}

					.down {
						font-size: 26rpx;
						font-family: Source Han Sans CN-Normal, Source Han Sans CN;
						font-weight: 400;
						color: #F94D29;
						line-height: 1em;
					}
				}

				.collect_right {
					width: 50%;
					height: 100%;
					background-image: url("https://zdcloud.zxkjnc.com/images/731b.png");
					background-size: 100% 100%;
				}
			}

			.shop {
				width: 100%;
				height: 160rpx;
				display: flex;
				justify-content: space-between;

				.shop_left {
					padding: 32rpx 0 30rpx 28rpx;
					box-sizing: border-box;
					width: 314rpx;
					height: 160rpx;
					background-image: url("https://zdcloud.zxkjnc.com/images/c3fc.png");
					background-size: 100% 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					text:first-child {
						font-size: 44rpx;
						font-family: Source Han Sans CN-Medium, Source Han Sans CN;
						font-weight: 500;
						color: #F94D29;
						line-height: 1em;
						margin-left: 8rpx;
					}

					text:last-child {
						font-size: 26rpx;
						font-family: Source Han Sans CN-Normal, Source Han Sans CN;
						font-weight: 400;
						color: #F94D29;
						line-height: 1em;
					}
				}

				.shop_right {
					padding: 32rpx 0 30rpx 28rpx;
					box-sizing: border-box;
					width: 314rpx;
					height: 160rpx;
					background-image: url("https://zdcloud.zxkjnc.com/images/fefcd.png");
					background-size: 100% 100%;
					display: flex;
					justify-content: space-between;

					.shop_right_flex {
						height: 100%;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						align-items: center;

						text:first-child {
							font-size: 44rpx;
							font-family: Source Han Sans CN-Medium, Source Han Sans CN;
							font-weight: 500;
							color: #F94D29;
							line-height: 1em;
							margin-left: 8rpx;
						}

						text:last-child {
							font-size: 26rpx;
							font-family: Source Han Sans CN-Normal, Source Han Sans CN;
							font-weight: 400;
							color: #F94D29;
							line-height: 1em;
						}
					}
				}
			}
		}
	}

	// 我的服务
	.service {
		width: 690rpx;
		// height: 284rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 24rpx auto 0 auto;
		padding: 40rpx 20rpx 20rpx 20rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;

		.service_title {
			font-size: 30rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #222222;
			line-height: 1em;
			flex-shrink: 0;
		}

		.service_content {
			display: flex;
			// justify-content: space-between;
			margin-top: 34rpx;
			height: 100%;
			padding: 0 8rpx;
			box-sizing: border-box;
			flex-wrap: wrap;

			.item {
				height: 100%;
				display: flex;
				width: 25%;
				flex-direction: column;
				align-items: center;
				// justify-content: space-between;

				image {
					width: 90rpx;
					height: 90rpx;
				}

				text {
					font-size: 28rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #222222;
					line-height: 1em;
					margin: 20rpx 0;
				}
			}
		}
	}

	// 遮罩层
	.zzc {
		height: 100vh;
		width: 100vw;
		position: fixed;
		top: 0;
		background-color: #000;
		opacity: .5;
		z-index: 9;
	}

	// 客服电话
	.modelbox {
		width: 528rpx;
		height: 289rpx;
		background: #FFFFFF;
		border-radius: 14rpx;
		margin: 0 auto;
		padding-top: 30rpx;

		.namebox {
			width: 128rpx;
			margin: 0rpx auto 30rpx auto;
			height: 44rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #222222;
			background: linear-gradient(180deg, #FFF 70%, #ffebe7 100%);
		}

		.inputbox {
			width: 430rpx;
			height: 84rpx;
			padding: 0 20rpx;
			background: #F7F7F7;
			border-radius: 16rpx;
			margin: 0 auto;
			display: flex;
			align-items: center;
		}

		.butbox {
			display: flex;
			height: 78rpx;
			width: 528rpx;
			margin-top: 52rpx;

			>view {
				height: 78rpx;
				width: 264rpx;
				background-color: #FFF;
				font-size: 30rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
				text-align: center;
				line-height: 78rpx;
			}
		}
	}
</style>